<!DOCTYPE html>
<html>
	<head>
	<!--
    	作者：offline
    	时间：2018-08-19
    	描述：按类搜索会跳到该页
   -->		 
		<meta charset="UTF-8">
		<title>小米手机列表</title>
		<link rel="icon" href="//s01.mifile.cn/favicon.ico"/>
		<link rel="stylesheet" type="text/css" href="./css/style.css">
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script type="text/javascript" src="js/web.js" ></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
	</head>
	<body  >
	<!-- start header -->
	<div id="app">
		<header>
			<div class="top center">
				<div class="left fl">
					<ul>
						<li><a href="index.html" target="_blank">小米商城</a></li>
						<li>|</li>
						<li><a href="">MIUI</a></li>
						<li>|</li>
						<li><a href="">米聊</a></li>
						<li>|</li>
						<li><a href="">游戏</a></li>
						<li>|</li>
						<li><a href="">多看阅读</a></li>
						<li>|</li>
						<li><a href="">云服务</a></li>
						<li>|</li>
						<li><a href="">金融</a></li>
						<li>|</li>
						<li><a href="">小米商城移动版</a></li>
						<li>|</li>
						<li><a href="">问题反馈</a></li>
						<li>|</li>
						<li><a href="">Select Region</a></li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="right fr">
					<div class="gouwuche fr"><a href="gouwuche.html">购物车</a></div>
					<div class="fr">
						<ul>
							<li><a style="cursor:pointer" v-on:click="jump()" target="_blank">{{omg}}</a></li>
							<li>|</li>
							<li><a href="./register.html" target="_blank" >注册</a></li>
							<li>|</li>
							<li><a href="">消息通知</a></li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</header>
	<!--end header -->

<!-- start banner_x -->
		<div class="banner_x center">
			<a href="./index.html" target="_blank"><div class="logo fl"></div></a>
			<a href=""><div class="ad_top fl"></div></a>
			<div class="nav fl">
				<ul>
					<li v-on:click="search()"><a href="#">全部商品</a></li>
					<li v-on:click="goName('小米手机')"><a href="#">小米手机</a></li>
					<li v-on:click="goName('红米手机')"><a href="#">红米手机</a></li>
					<li v-on:click="goName('笔记本电脑')"><a href="#" >笔记本电脑</a></li>
					<li v-on:click="goName('电视')"><a href="#">电视</a></li>
					<li v-on:click="goName('路由器')"><a href="#">路由器</a></li>
					<li v-on:click="goName('智能硬件')"><a href="#">智能硬件</a></li>
				</ul>
			</div>
			<div class="search fr">
				<form action="search.html">
					
					<div class="text fl">
						<input id="inp" type="text" class="shuru"  >
					</div>
					<div class="submit fl">
						<!--模糊搜索商品 -->
						<input type="submit" class="sousuo" value="搜索" v-on:click="search()"/>
					</div>
					<div class="clear"></div>
				</form>
				<div class="clear"></div>
			</div>
		</div>
<!-- end banner_x -->

	<!-- start banner_y -->
	<!-- end banner -->

	<!-- start danpin -->
		<div class="danpin center " >
			
			<div class="biaoti center">{{name}}</div>
			<div style="margin-bottom: 10px;">
				<div class="youhui" v-on:click="saleNum(name)" style="font-size:12px;float: left;margin-left:150px;margin-right: 10px;" > 销量排行  </div>
				<div class="youhui"  style="font-size:12px;" v-on:click="priceNum(name)"> 价格排行</div>
			</div>
			<!--高度增加到730px-->
			<div class="main center" style="min-height: 730px;" >
				
				<div v-for="p in list" class="mingxing fl mb20 clearfix" style=" margin:0px 11px 20px 0px; border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">
					<!--v-bind绑定src时如果web在js定义了则要在vue的data声明再调用-->
					<!--//去掉target="_blank"-->
					<div class="sub_mingxing" ><a v-on:click="go(p.productCode)" href="xiangqing.html" ><img v-bind:src="photourl+p.productPhoto" alt=""></a></div>
					<div class="pinpai" ><a v-on:click="go(p.productCode)" href="xiangqing.html" >{{p.productName}}</a></div>
					<div class="youhui" >{{p.productComment}}</div>
					<div class="jiage">{{p.productPrice}}元</div>
					<div class="youhui" >销量  {{p.salenum}}</div>
				</div>
				
				<div class="clear"></div>
				
			</div>
				<div style="margin-left:1300px; ">
					<div style="float:left">第</div>
					<div v-for="s in count" v-on:click="fuzzyPage(s)" style=" float:left;margin-left: 10px; "><a href="###" style=" font-size: 17px;">{{s}}  </a></div>
					<div style="float:left;margin-left: 10px;"> 页</div>	
				</div>
		</div>
		<footer class="mt20 center">			
			<div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
			<div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：151-3503-4757，本网站所列数据，除特殊说明，所有数据均出自昭平科技实验室测试</div>

		</footer>

	<!-- end danpin -->
	
</div>
	</body>
	<script>
		var vue=new Vue({
			el:"#app",
			
			data:{
				list:[],
				name:"",
				code:"",
				photourl:window.web_server_static,
				web_server:window.web_server,
				page:"1",
				pagesize:"10",
				count:"",
				isA:0,////判断分页时页面进哪个Servlet;
				urlcatepage:"",
				uuu:window.sessionStorage.getItem('loginUsername'),
				omg:'',
			},
			created:function(){
				this.init(),
				this.dengl()
			},
			methods:{
				dengl:function(){
//						var uuu=window.sessionStorage.getItem('loginUsername');
						if(this.uuu==null){
							this.omg="登录";														
						}else{
								this.omg=this.uuu;
						}													
					},
					jump:function(){
					if(this.uuu!=null){
						window.location.href="self_info.html";
					}else{
						window.location.href="login.html";
					}
				},
				//从主页点击进来取点击的类名，显示出商品
				init:function(){
					var self=this;
					var cate=window.sessionStorage.getItem("name");
//					alert(cate);
					self.name=cate
					var params=new URLSearchParams();
					params.append("catename",self.name);
					params.append("page",self.page);
					params.append("pagesize",self.pagesize);
					//必须要写
					axios.defaults.withCredentials = true;
					axios.post(web_server+"api/product/selectcategory",params).then(function(res){
						var a=0;
						a=res.data;
						if(a.status==200){
//							var c=JSON.stringify(a.data);
							//alert(c);
							//alert("成功");
							self.list=a.data.list;
							var total=a.data.total;//总条数
							self.count=Math.ceil(total/self.pagesize);//把总页数赋给count
							
						}
					})
				},
				catePage:function(s){
					var self=this;
					if(self.isA==0){
						self.urlcatepage='api/product/selectcategory'//默认
					}else
					if(self.isA==1){
						self.urlcatepage='api/product/salenum'//销量
					}else
					if(self.isA==2){
						self.urlcatepage='api/product/pricenum'//同类价格排序
					}
					var params=new URLSearchParams();
					
					params.append("catename",self.name);
					params.append("page",s);
					params.append("pagesize",self.pagesize);
					//必须要写
					axios.defaults.withCredentials = true;
					axios.post(web_server+self.urlcatepage,params).then(function(res){
						var a=0;
						a=res.data;
						if(a.status==200){
							self.list=a.data.list;
//							alert("a")
								var c=JSON.stringify(res);
								
					console.log(c);
						//console.log(a);
						}
						
							
					})
					
				},
				go:function(code){
					window.sessionStorage.setItem("code",code);
				},
				//全部商品搜索
				search:function(){
					var a=document.getElementById("inp").value;
					window.sessionStorage.setItem("fuzzy",a);
					if(1==1){
						window.location.href="search.html";
					}
				},
				//查询分类商品
				goName:function(name){
					var self=this;
					var params=new URLSearchParams();
					//alert(name);
					self.name=name;
					params.append("catename",self.name);
					params.append("page",self.page);
					params.append("pagesize",self.pagesize);
					//必须要写
					axios.defaults.withCredentials = true;
					axios.post(web_server+"api/product/selectcategory",params).then(function(res){
						var a=0;
						a=res.data;
//						var c=JSON.stringify(res);
//						console.log(c);
						if(a.status==200){
//							var c=JSON.stringify(a.data);
//							alert(c);
							//alert("成功");
							self.list=a.data.list;
						}
					})
				},
				//分类商品按销量排序
				saleNum:function(name){
					var self=this;
					var params=new URLSearchParams();
//					alert(name);
//					self.name=name;
					params.append("catename",self.name);
					params.append("page",self.page);
					params.append("pagesize",self.pagesize);
					//必须要写
					axios.defaults.withCredentials = true;
						axios.post(web_server+"api/product/salenum",params).then(function(res){
						var a=0;
						a=res.data;
//						var c=JSON.stringify(res);
//						alert(c);
						if(a.status==200){
							
							//alert("成功");
							self.list=a.data.list;
							self.isA=1;//点销量catePage函数中s变为以相当于携带分页的第几页再次进入这个函数
						}else{
							alert("失败");
						}
					})
				},
				//同类商品价格排序
				priceNum:function(name){
					var self=this;
					var params=new URLSearchParams();
//					alert(name);
//					self.name=name;
					params.append("catename",self.name);
					params.append("page",self.page);
					params.append("pagesize",self.pagesize);
					//必须要写
					axios.defaults.withCredentials = true;
						axios.post(web_server+"api/product/pricenum",params).then(function(res){
						var a=0;
						a=res.data;
						var c=JSON.stringify(res);
						console.log(c);
						if(a.status==200){
							
							//alert("成功");
							self.list=a.data.list;
							self.isA=2;
						}else{
							alert("失败");
						}
					})
				}
			}
		})
	</script>
</html>